<!DOCTYPE >
<html>
    <head>
        <title>Search Project</title>
        <link href="/static/styles.css" rel="stylesheet">
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">

        <style>
            body {
                padding: 10px;
            }
            input[type="text"] {
                height: 30px;
            }

            .highlight {
                background-color: yellow;
                font-weight: bold;
            }
            
            .header {
                margin: 0 auto;
                width: 700px;
                text-align: center;
            }
            
            #search-box {
                width: 500px;
            }
        </style>
    </head>
    <body>
        <div class="header">
            <h1>Goosegle cache</h1>
            <!--
            <form class="form-search">
                <input id="search-box" type="text" name="query" value="{{ query }}" class="search-query" placeholder="Search query..."/>
                <input type="submit" value="Search" class="btn btn-success inline"/>
            </form>
            -->
        </div>

        {% if docs %}
        <ul class="content">
            {% for doc in docs %}
            <li>
                <span class="label label-info">{{ doc.score }}</span>
                <a href="#">{{ doc.title }}</a>
                <br/>
                {{ doc.content }}
                <br/>
                <p></p>
            </li>
            {% endfor %}
        </ul>
        {% endif %}
        
        {% if doc %}
        <div class="infobar">Cached version of document: {{doc.title}}</div>
        <pre class="precontent">{{doc.content}}</pre>
        {% endif %}
    </body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="/static/jquery.highlight-4.closure.js"></script>
    <script src="/static/jquery.autocomplete.min.js"></script>
    <script>
        $(document).ready(function() {
            var query = '{{query}}';
			
            var terms = query.split(" ");
            $('.content').highlight(query);
            for (var i = 0; i < terms.length; i++) {
                $('.precontent').highlight(terms[i]);
            };
			/**
            $('#search-box').autocomplete({
                serviceUrl : '/search/term/autocomplete',
                delimiter : " "
            });
			**/
        });
    </script>

</html>
